<template>
   <span class="on-off displayFlex flex-algin-center" @click="isOnFn" :class="{'active':isOn}">
        <span class="on-off-btn" :class="{active:isOn}"></span>
    </span>
</template>

<script>
    export default {
        name: "OnOff",
        props:{
            isOnProp:Boolean
        },
        data(){
            return{
                isOn:false
            }
        },
        mounted(){
            this.isOn = this.isOnProp;
        },
        methods:{
            isOnFn(){
                this.isOn=!this.isOn;
            }
        },
        watch:{
            isOnProp(val){
                this.isOn = val;
            },
            isOn(val){
                this.$emit('changeSelect',val)
            }
        }
    }
</script>

<style scoped>
    .on-off{
        width: .5rem;
        height: .26rem;
        border: .02rem solid #E0E0E0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: .25rem;
        background-color: #f5f5f5;
    }
    .on-off.active{
        background-color: #5D89E8;
        border-color: #5D89E8;
    }
    .on-off-btn{
        display: inline-block;
        position: relative;
        z-index: 1;
        left: 0;
        top: 0;
        width: .24rem;
        height: .24rem;
        background: #fff;
        border-radius: .25rem;
        transition: all 0.25s;
    }
    .active.on-off-btn{
        left: calc(100% - .25rem) ;
    }
</style>